<template>
  <div class="dashboard page-view">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="list">
        <div class="home-icon">
          <i class="iconfont icon-home"></i>
        </div>
        <div class="item">
          <router-link to="/">
            <span class="text">首页</span>
          </router-link>
        </div>
      </div>
      <h1 class="page-title">系统概览</h1>
    </div>

    <!-- 统计数据卡片 -->
    <div class="stats-grid">
      <StatCard
        title="总经销商数"
        :value="stats.totalDealers"
        :change="{ value: stats.dealerChangeRate, direction: stats.dealerChangeDirection }"
        icon="icon-users"
        color="var(--v-theme)"
      />

      <StatCard
        title="总门店数"
        :value="stats.totalStores"
        :change="{ value: stats.storeChangeRate, direction: stats.storeChangeDirection }"
        icon="icon-store"
        color="#28C76F"
      />

      <StatCard
        title="总新闻数"
        :value="stats.totalNews"
        :change="{ value: stats.newsChangeRate, direction: stats.newsChangeDirection }"
        icon="icon-list"
        color="#EA5455"
      />

      <StatCard
        title="总产品数"
        :value="stats.totalProducts"
        :change="{ value: stats.productChangeRate, direction: stats.productChangeDirection }"
        icon="icon-paynow"
        color="#FF9F43"
      />
    </div>

    <!-- 管理功能入口 -->
    <div class="stats-grid">
      <router-link to="/position" class="feature-card">
        <div class="feature-icon iconfont icon-idcard"></div>
        <div class="feature-title">职位管理</div>
        <div class="feature-desc">管理系统中的职位信息</div>
      </router-link>
    </div>

    <!-- 最新动态 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">最新动态</div>
        <div class="chart-filter">
          <router-link to="/news">查看全部 <i class="iconfont icon-arrow-right"></i></router-link>
        </div>
      </div>
      <RecentActivities :activities="recentActivities" />
    </div>

    <!-- 系统状态 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">系统状态</div>
      </div>
      <SystemStatus 
        :serverStatus="systemStatus.server"
        :databaseStatus="systemStatus.database"
        :storageStatus="systemStatus.storage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { get } from "@/utils/request";
import StatCard from "@/components/StatCard.vue";
import LineChart from "@/components/charts/LineChart.vue";
import PieChart from "@/components/charts/PieChart.vue";
import RecentActivities from "@/components/RecentActivities.vue";
import SystemStatus from "@/components/SystemStatus.vue";

// 统计数据
const stats = ref({
  totalDealers: "0",
  totalStores: "0",
  totalNews: "0",
  totalProducts: "0",
  dealerChangeRate: 0,
  dealerChangeDirection: "none",
  storeChangeRate: 0,
  storeChangeDirection: "none",
  newsChangeRate: 0,
  newsChangeDirection: "none",
  productChangeRate: 0,
  productChangeDirection: "none"
});

// 经销商图表数据
const dealerChartRange = ref("month");
const dealerChartData = ref({
  labels: [],
  datasets: [
    {
      label: "新增经销商",
      data: [],
      borderColor: "var(--v-theme)",
      backgroundColor: "rgba(99, 102, 241, 0.1)"
    }
  ]
});

// 产品分类数据
const productCategoryData = ref({
  labels: [],
  datasets: [
    {
      data: [],
      backgroundColor: [
        "rgba(99, 102, 241, 0.7)",
        "rgba(16, 185, 129, 0.7)",
        "rgba(245, 158, 11, 0.7)",
        "rgba(239, 68, 68, 0.7)"
      ]
    }
  ]
});

// 最新动态
const recentActivities = ref([]);

// 系统状态
const systemStatus = ref({
  server: "normal",
  database: "normal",
  storage: "normal"
});

// 获取统计数据
const fetchStats = async () => {
  try {
    const res = await get("/dashboard/stats");
    if (res.code === 200) {
      stats.value = res.data.stats;
      dealerChartData.value = res.data.dealerChart;
      productCategoryData.value = res.data.productCategory;
      recentActivities.value = res.data.recentActivities;
      systemStatus.value = res.data.systemStatus;
    }
  } catch (error) {
    console.error("获取统计数据失败", error);
  }
};

// 获取经销商统计数据
const fetchDealerStats = async () => {
  try {
    const res = await get("/dashboard/dealerStats", { range: dealerChartRange.value });
    if (res.code === 200) {
      dealerChartData.value = res.data;
    }
  } catch (error) {
    console.error("获取经销商统计数据失败", error);
  }
};

// 初始化加载数据
onMounted(() => {
  fetchStats();
});
</script>

<style scoped lang="less">
.dashboard {
  padding: 20px;

  .breadcrumb {
    margin-bottom: 20px;
    
    .list {
      display: flex;
      align-items: center;
      font-size: 14px;
      
      .home-icon {
        color: #999;
      }
      
      .item {
        margin-right: 8px;
        
        .text {
          color: #333;
          
          &:hover {
            color: var(--v-theme);
          }
        }
      }
      
      .seperate {
        margin-right: 8px;
        color: #999;
      }
    }
    
    .page-title {
      margin-top: 10px;
      font-size: 24px;
      font-weight: 500;
      color: #333;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--v-card-bg);
    border-radius: var(--v-card-radius);
    box-shadow: var(--v-shadow);
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    color: var(--v-text);
    text-decoration: none;
    border: 1px solid var(--v-border-color);
  }
  
  .feature-card:hover {
    box-shadow: var(--v-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--v-theme);
  }
  
  .feature-icon {
    font-size: 40px;
    margin-bottom: 15px;
    color: var(--v-theme);
  }
  
  .feature-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--v-text);
  }
  
  .feature-desc {
    font-size: 14px;
    color: var(--v-text-light);
  }

  .chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }

  .chart-container {
    background-color: var(--v-card-bg);
    border-radius: var(--v-card-radius);
    box-shadow: var(--v-shadow);
    padding: 20px;
    margin-bottom: 20px;
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .chart-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }
      
      .chart-filter {
        font-size: 14px;
        color: var(--v-text-light);
        cursor: pointer;
        
        &:hover {
          color: var(--v-theme);
        }
        
        select {
          padding: 5px 10px;
          border-radius: 4px;
          border: 1px solid var(--v-border-color);
          background-color: var(--v-card-bg);
          color: var(--v-text);
          outline: none;
          
          &:focus {
            border-color: var(--v-theme);
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .chart-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
}
</style>